// Color palette

// 科技感风格颜色系统
$primaryBlue: #6ab7ff; // 主色调 - 浅蓝色
$neonAccent: #00f7ff; // 霓虹点缀色
$bgLight: #f5f9ff; // 背景色
$darkText: #2c3e50; // 深色文本

// Primary Colors
$primaryHover: lighten($primaryBlue, 10%); // 悬停状态
$primaryActive: darken($primaryBlue, 10%); // 激活状态

// Text Colors
$textTitle: $darkText; // 标题文本
$textBody: lighten($darkText, 10%); // 正文文本
$textLight: lighten($darkText, 30%); // 次要文本

// UI Element Colors
$borderLight: rgba($primaryBlue, 0.2); // 边框和分隔线
$backgroundLight: $bgLight; // 浅色背景
$backgroundDark: darken($darkText, 10%); // 深色背景（暗模式）

// Status Colors
$success: #36d1dc; // 成功消息
$warning: #f1c056; // 警告消息
$danger: #f87c85; // 错误消息
$info: $primaryBlue; // 信息消息

// Legacy variables for backward compatibility
$deepBlue: $primaryBlue;
$goldAccent: $neonAccent; // 替换为霓虹色
$ivoryWhite: #FFFFFF;
$graphiteGray: $darkText;
$lightDivider: $borderLight;
$ecoGreen: $success;

// sidebar
$menuText: $textBody;
$menuActiveText: $primaryBlue;
$subMenuActiveText: $primaryBlue;

$menuBg: #FFFFFF;
$menuHover: rgba($primaryBlue, 0.05);

$subMenuBg: #FFFFFF;
$subMenuHover: rgba($primaryBlue, 0.05);

$sideBarWidth: 220px;

// Shadow Variables
$shadowCard: 0 4px 12px rgba($primaryBlue, 0.1);
$shadowDialog: 0 8px 16px rgba($primaryBlue, 0.15);
$shadowDropdown: 0 3px 6px rgba($primaryBlue, 0.12);

// Border Radius
$radiusSmall: 4px;   // For input fields, checkboxes
$radiusMedium: 8px;  // For buttons, tabs
$radiusLarge: 12px;  // For cards, dialogs

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
  deepBlue: $deepBlue;
  goldAccent: $goldAccent;
  ivoryWhite: $ivoryWhite;
  ecoGreen: $ecoGreen;
  graphiteGray: $graphiteGray;
  lightDivider: $lightDivider;
  primaryBlue: $primaryBlue;
  neonAccent: $neonAccent;
  bgLight: $bgLight;
  darkText: $darkText;
}
